<template>
  <view class="verification-list-container">
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <image 
        class="back-icon" 
        src="/static/image/arrow_right.png" 
        mode="aspectFit" 
        @click="navigateBack"
      />
      <text class="nav-title">核销记录</text>
      <view class="empty-box"></view>
    </view>

    <!-- 扫码核销按钮 -->
    <view class="scan-section">
      <view class="scan-button" @click="handleScan">
        <image class="scan-icon" src="/static/image/icon_book.png" mode="aspectFit"></image>
        <text class="scan-text">扫码核销</text>
      </view>
    </view>

    <!-- 核销记录列表 -->
    <view class="records-section">
      <text class="section-title">核销记录</text>
      <scroll-view class="records-scroll" scroll-y v-if="verificationRecords.length > 0">
        <view 
          class="record-item" 
          v-for="(record, index) in verificationRecords" 
          :key="index"
          @click="goToVerificationDetail(record.id)"
        >
          <view class="record-header">
            <text class="order-number">订单号：{{ record.orderNumber }}</text>
            <text class="record-status" :class="getVerificationStatusClass(record.status)">
              {{ getVerificationStatusText(record.status) }}
            </text>
          </view>
          <view class="record-content">
            <view class="record-info">
              <text class="info-item">核销时间：{{ record.verificationTime }}</text>
              <text class="info-item">核销人：{{ record.verifier }}</text>
            </view>
            <view class="record-amount">
              <text>金额：¥{{ record.amount }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-else>
        <image class="empty-icon" src="/static/image/table.png" mode="aspectFit"></image>
        <text class="empty-text">暂无核销记录</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 核销记录数据
const verificationRecords = ref([])

// 模拟核销记录数据
const loadVerificationRecords = () => {
  verificationRecords.value = [
    {
      id: 1,
      orderNumber: 'TT20231201001',
      status: 'completed',
      verificationTime: '2023-12-01 15:30',
      verifier: '张管理员',
      amount: 80
    },
    {
      id: 2,
      orderNumber: 'TT20231202005',
      status: 'completed',
      verificationTime: '2023-12-02 18:45',
      verifier: '张管理员',
      amount: 120
    },
    {
      id: 3,
      orderNumber: 'TT20231128012',
      status: 'completed',
      verificationTime: '2023-11-28 11:20',
      verifier: '张管理员',
      amount: 60
    }
  ]
}

// 获取核销状态样式类
const getVerificationStatusClass = (status) => {
  switch (status) {
    case 'completed': return 'status-completed'
    default: return ''
  }
}

// 获取核销状态文本
const getVerificationStatusText = (status) => {
  switch (status) {
    case 'completed': return '已完成'
    default: return '未知'
  }
}

// 扫码核销
const handleScan = () => {
  // 模拟扫码功能
  uni.scanCode({
    onlyFromCamera: true,
    scanType: ['qrCode'],
    success: (res) => {
      console.log('扫码结果：', res)
      uni.showToast({
        title: '核销成功',
        icon: 'success'
      })
      
      // 模拟添加新记录
      const newRecord = {
        id: Date.now(),
        orderNumber: res.result || 'TT20231205001',
        status: 'completed',
        verificationTime: new Date().toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        }),
        verifier: '张管理员',
        amount: Math.floor(Math.random() * 100) + 50
      }
      
      verificationRecords.value.unshift(newRecord)
    },
    fail: (err) => {
      console.error('扫码失败：', err)
      if (err.errMsg !== 'scanCode:fail cancel') {
        uni.showToast({
          title: '扫码失败，请重试',
          icon: 'none'
        })
      }
    }
  })
}

// 跳转到核销详情
const goToVerificationDetail = (id) => {
  uni.navigateTo({
    url: `/pages/mine/verificationDetail?id=${id}`
  })
}

// 返回上一页
const navigateBack = () => {
  uni.navigateBack()
}

// 页面加载时初始化数据
onMounted(() => {
  loadVerificationRecords()
})
</script>

<style lang="scss">
$primary-color: #165dff;
$success-color: #07c160;
$gray-light: #f5f5f5;
$gray-middle: #999;
$gray-dark: #666;
$border-color: #f0f0f0;

.verification-list-container {
  min-height: 100vh;
  background-color: $gray-light;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  background-color: #fff;
  border-bottom: 1px solid $border-color;

  .back-icon {
    width: 24px;
    height: 24px;
    transform: rotate(180deg);
    cursor: pointer;
  }

  .nav-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .empty-box {
    width: 24px;
  }
}

.scan-section {
  padding: 20px 16px;
  background-color: #fff;
  margin-bottom: 12px;

  .scan-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, $primary-color, #4080ff);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;

    .scan-icon {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
    }

    .scan-text {
      font-size: 16px;
      font-weight: 500;
    }
  }
}

.records-section {
  background-color: #fff;
  padding: 0 16px 16px;

  .section-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding: 16px 0;
    border-bottom: 1px solid $border-color;
  }

  .records-scroll {
    height: calc(100vh - 280px);

    .record-item {
      padding: 16px 0;
      border-bottom: 1px solid $border-color;

      &:last-child {
        border-bottom: none;
      }

      .record-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .order-number {
          font-size: 14px;
          color: $gray-dark;
        }

        .record-status {
          font-size: 12px;
          padding: 3px 8px;
          border-radius: 4px;

          &.status-completed {
            background-color: #f0f9f4;
            color: $success-color;
          }
        }
      }

      .record-content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .record-info {
          .info-item {
            display: block;
            font-size: 13px;
            color: $gray-middle;
            margin-bottom: 5px;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }

        .record-amount {
          font-size: 15px;
          font-weight: 500;
          color: #333;
        }
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 50px 0;

    .empty-icon {
      width: 100px;
      height: 100px;
      margin-bottom: 20px;
      opacity: 0.5;
    }

    .empty-text {
      font-size: 14px;
      color: $gray-middle;
    }
  }
}
</style>